<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		:root {
			--rule-emoji :( :doodle {
					@grid: 20 / 100vmax;
					grid-gap: 1px;
					background: #f9d654;
					overflow: hidden;
				}

				transition: @r(1s) ease;
				transform: scale(@rand(.1, 1)) rotate(@rand(0, 360)deg);

				:after {
					content: \@hex(@rand(0x1F600, 0x1F636));
					opacity: @r(.1, 1);
					font-size: 3vmax;
				}

			)
		}
	</style>
	<body>
		<css-doodle>
			@use: var(--rule-emoji);
		</css-doodle>

	</body>
	<script src="https://unpkg.com/css-doodle@0.29.0/css-doodle.min.js"></script>
	<script>
		const doodle = document.querySelector('css-doodle');
		// 每次点击刷新css-doodle
		doodle.onclick = function() {
			doodle.update();
		};
	</script>
</html>
